<template>
	<view>
		<view class="card" style="margin-top: 20rpx;" v-for="(item ,index) in list" :key="item.id" @click="goMessageDetails(item)">
			<u--text :lines="1" :text="item.content.title" bold color="#333333" size="28rpx"></u--text>
			<u--text :lines="2" :text="item.content.content"
				color="#666666" size="28rpx" margin="20rpx 0"></u--text>
			<view class="massage-bottom">
				<view class="type" :class="'type_'+item.type">
					{{item.type==='Text'?'消息':item.type==='Notice'?'通知':item.type==='Announcement'?'公告':'新闻'}}
				</view>
				<view class="time">
					{{$u.timeFrom(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"massageList",
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goMessageDetails(item){
				console.log(JSON.stringify(item))
				uni.navigateTo({
					url:`/pages/message/messageDetails/messageDetails?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		}
	}
</script>

<style lang="scss">
  .card{
		.massage-bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: -10rpx;
			.type{
				width: 96rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.time{
				font-size: 24rpx;
				color: #999999;
			}
		}
				
	}
</style>